<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>上传</title>
		<script src="../js/vue.js"></script>
		<script src="../js/axios.min.js"></script>
		<script src="../js/elementui.js"></script>
		<script src="../js/jquery3.5.1.js"></script>
		<script src="../layui/layui.js"></script>
		<link rel="stylesheet" href="../layui/css/layui.css">
		<link rel="stylesheet" href="../css/index.css" />
		<link rel="stylesheet" href="../css/upload.css" />
	</head>
	<body>
		<div id="app">
			<div id="main">
				<div id="box">发布图文</div>
				<div id="description"><div class="descrip_span">作品描述</div>
				<span style="color: red;">*</span>标题:&nbsp;&nbsp;
				<el-input placeholder="请填写作品标题,为作品获得更多流量"></el-input>
				<br />
				&nbsp;&nbsp;简介:
				<div id="intro">
					<textarea placeholder="请填写作品简介" id="intro_text"></textarea>
					<div class="message"><strong>#添加话题</strong>&nbsp;&nbsp;
					&nbsp;&nbsp;<strong>@好友</strong></div>
				</div>
				<div class="text">添加图片</div>
				<el-upload
				  action="https://jsonplaceholder.typicode.com/posts/"
				  list-type="picture-card"
				  :on-preview="handlePictureCardPreview"
				  :on-remove="handleRemove">
				  <i class="el-icon-plus"></i>
				</el-upload>
				<el-dialog :visible.sync="dialogVisible">
				  <img width="100%" :src="dialogImageUrl" alt="">
				</el-dialog>
				<br />
				<br />
				&nbsp;&nbsp;分类:&nbsp;&nbsp;
				  <el-select v-model="value" placeholder="请选择">
				    <el-option
				      v-for="item in options"
				      :key="item.value"
				      :label="item.label"
				      :value="item.value">
				    </el-option>
				  </el-select>
				  <br />
				  <br />
			   &nbsp;&nbsp;设置谁可以看:&nbsp;&nbsp;
			   <el-radio v-model="radio" label="1">公开</el-radio>
			    <el-radio v-model="radio" label="2">好友可见</el-radio>
			    <el-radio v-model="radio" label="3">仅自己可见</el-radio>
				</div>
				<button class="but">发布</button>
				<button id="temporarily">暂存返回</button>
			</div>
		</div>
	</body>
	<script>
		new Vue({
			el:"#app",
			data:{
				dialogImageUrl: '',
				dialogVisible: false,
				radio:"1",
				 options: [{
				          value: '选项1',
				          label: '综合'
				        }, {
				          value: '选项2',
				          label: '生活'
				        }, {
				          value: '选项3',
				          label: '绘画'
				        }, {
				          value: '选项4',
				          label: '动漫'
				        }, {
				          value: '选项5',
				          label: '游戏'
				        }]
			},methods:{
				  handleRemove(file, fileList) {
				        console.log(file, fileList);
				 },
				 handlePictureCardPreview(file) {
				        this.dialogImageUrl = file.url;
				        this.dialogVisible = true;
				      }
			}
		})
	</script>
	<script type="text/javascript">
		$("#temporarily").click(function(){
			location.href="../createData/indexData.html";
		})
		layui.use(function(){
		  var upload = layui.upload;
		  var layer = layui.layer;
		  // 渲染
		  upload.render({
		    elem: '.demo-class-accept', // 绑定多个元素
		    url: '', // 此处配置你自己的上传接口即可
		    accept: 'file', // 普通文件
		    done: function(res){
		      layer.msg('上传成功');
		      console.log(res);
		    }
		  });
		  // 渲染
		    upload.render({
		      elem: '#ID-upload-demo-size',
		      url: '', // 此处配置你自己的上传接口即可
		      size: 3072, // 限制文件大小，单位 KB
		      done: function(res){
		        layer.msg('上传成功');
		        console.log(res);
		      }
		    });
		});
	</script>
</html>
